<template>
  <div class="mine">
      <div class="mine_top">
        <p class="mine_title">我的</p>
        <div class="mine_text">
          <img src="../../assets/defaultImg.jpeg" alt="">
          <div class="name">
            <p @click="onLogin">立即登录</p>
            <p style="margin-top:.1rem;">手机号：188****8888</p>
          </div>
        </div>
      </div>
      
      <div class="mine_js">
        <div class="js_top">
          <van-icon name="label" />
          <p class="my_dd">我的订单</p>
          <p class="all_dd">查看全部订单  ></p>
        </div>
        <div class="js_btm">
          <img src="../../assets/1.jpg" alt="">
        </div>
      </div> 
  </div>
</template>

<script>
export default {
    name:"MineView",
    methods:{
      onLogin(){
          this.$router.push('login')
      }
    }
}
</script>

<style lang="scss" scoped>
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
  .mine_top{
    width:7.5rem;
    height:3rem;
    background: #42b95f;
    color:#fff;
    .mine_title{
      font-size: .35rem;
      text-align: center;
      padding-top:.2rem;
      margin-left:.3rem;
    }
    .mine_text{
      width:7.5rem;
      font-size: .3rem;
      height:auto;
      display: flex;
      margin-top:.6rem;
    }
    img{
      width:1.5rem;
      height:1.5rem;
      border-radius: 50%;
      margin-left: .25rem;
    }
    .name{
      margin-left:.2rem;
      margin-top:.3rem;
    }
  }
  .mine_js{
    height:3rem;
    font-size: .3rem;
    .js_top{
      display: flex;
      justify-content: space-between;
      margin-top:.2rem;
      height:.6rem;
      border-bottom:0.01rem solid #ccc;
       .van-icon{
        color:#42b95f;
        font-size: .5rem;
        margin-left:.2rem;
      }
      .my_dd{
          margin-right:3.3rem;
      }
      .all_dd{
        margin-right:.2rem;
        color:#888;
      }
    
    }
   .js_btm{
     width:7.5rem;
     height:auto;
     img{
       margin-top:0.05rem;
       width:100%;
       height:7.2rem;
     }
   }
  }
  

</style>